<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>1.2条件和循环</title>
    <style media="screen" type="text/css">
      div {
        width: 600px;
        margin: 30px auto;
      }
      .css3{
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id='test3' class="css3">
      <button type="button" @click='changeState()'>改变可见</button>
      <p v-if='seen'>可见（v-if v-else）</p>
      <p v-else>不可见</p>
    </div>
    <div id = 'test4'>
      <li v-for='thing in todos'>
        {{thing.text}}
      </li>
    </div>
  </body>
  <script src="vue.min.js" charset="utf-8"></script>
  <script type="text/javascript">
  var app3 = new Vue({
    el: '#test3',
    data:{
      seen: true
    },
    methods: {
      changeState(){
        this.seen=!this.seen;
      }
    }
  })
  var app4 = new Vue({
    el: '#test4',
    data:{
      todos:[
      {text: 'JS Guide'},
      {text: 'Vue Guide'},
      {text: 'Build Project'}
      ]
    }
  })
  </script>
</html>
